<script setup>
import {ref,onMounted} from 'vue'
import { useRouter } from "vue-router";
import useUserInfoStore from "@/stores/user"; //引入仓库
import { storeToRefs } from "pinia"; //引入pinia转换
const userInfoStore = useUserInfoStore()
const { username, img ,password} = storeToRefs(userInfoStore); 
const router = useRouter();

const userLogin = ref('')
const passwordLogin= ref('')
function btn(){
    if(userLogin.value==''){
        alert('用户名不能为空')
    }
    else{
        userInfoStore.username = userLogin.value
        userInfoStore.password = passwordLogin.value
        sessionStorage.setItem('userlogin', userLogin.value);
        router.push({
            path: "/todolist"
        })
    }
}
function quit(){
    userInfoStore.username = ''
    userInfoStore.password = ''
    document.getElementById("popUp").hidden = false
    document.getElementById("userDataHidden").style.display = "none"
}
onMounted(() => {
    let user = username.value
    if(user!=null && user!=''){
        document.getElementById("popUp").hidden = true
        document.getElementById("userDataHidden").style.display = "block"
    }
})
</script>

<template>
    <div class="userMain">
        <div id="popUp">
            <p class="title">用户登录</p>
            <p><input type="text" id="searchTxt"  placeholder="账号" v-model.lazy="userLogin"></p>
            <p><input type="text" id="searchTxt"  placeholder="密码" v-model.lazy="passwordLogin"></p>
            <!-- <p><button class="btn" @click="btn">登录</button></p> -->
            <p><el-button type="warning" class="btn" @click="btn">登录</el-button></p>
        </div>
        <div id="userDataHidden">
            <div class="userData">
                <div class="userHome">
                    <div>
                        <img :src="img"/>
                        <p>账号：{{ username }}</p>
                        <p>密码：{{ password }}</p>
                        <p @click="quit">退出登录</p>
                    </div>
                    <div></div>
                </div>
            </div>
        </div>
        
    </div>
</template>

<style scoped>
#userDataHidden{
    display: none;
    margin-left: 30%;
}
.userHome{
    width: 330px;
    height: 320px;
    background-image: url(../images/bg_default@2x.png);
    background-size: cover;
}
.userHome nav{
    margin-left: -15px;
}
.userData{
    float: left;
    margin-left: 10%;
    width: 330px;
    height: 453px;
    border-radius: 10px;
    background-color: #f4f4f4;
}
.userHome img{
    text-align: center;
    width: 100px;
    height: 100px;
    margin-top: 50px;
    margin-left: 115px;
    border-radius: 50%;
}
.userHome p{
    margin-top: 8px;
    margin-left: 115px;
}
#searchTxt{
    padding-left: 20px;
    margin-top:24px;
    width: 70%;
    height: 46px;
    font-size: 16px;
    border-radius: 50px;
    border: 1px solid rgba(0, 0, 0, 0.235);
    background-color: white;
}
.btn{
    margin-top:24px;
    width: 75%;
    height: 50px;
    font-size: 16px;
    border-radius: 50px;
    border: 0;
    color: white;
    background: linear-gradient(to right, #ff6f00, #ffa516);
}
#popUp .title{
    color: rgb(89, 89, 89);
    text-align: center;
    padding-top: 30px ;
    margin-bottom: 30px;
    font-size: 20px;
}
#popUp{
    text-align: center;
    margin-left: 33%;
    margin-top: 5px;
    width: 34%;
    height: 90%;
    border-radius: 10px;
    border: 2px solid rgb(180, 180, 180);
    background-color: white;
}
#popUp p{
    margin-bottom: -20px;
}
.userMain{
    margin-top:80px;
    width: 100%;
    height: 85vh;
}
</style>